<template>
    <div>
        <el-form-item
            v-if="activeData['start-placeholder'] !== undefined"
            label="开始占位"
        >
            <el-input
                v-model="activeData['start-placeholder']"
                placeholder="请输入占位提示"
            />
        </el-form-item>
        <el-form-item
            v-if="activeData['end-placeholder'] !== undefined"
            label="结束占位"
        >
            <el-input
                v-model="activeData['end-placeholder']"
                placeholder="请输入占位提示"
            />
        </el-form-item>
        <el-tooltip effect="dark" content="默认时间为当时填写的时间" placement="top">
            <el-form-item>
                <span slot="label">
                    默认当时
                    <i class="el-icon-question" />
                </span>
                <el-switch v-model="activeData.config['defaultNowTime']" />
            </el-form-item>
        </el-tooltip>
        <el-form-item
            v-if="activeData.type !== undefined "
            label="时间类型"
        >
            <el-select
                v-model="activeData.type"
                :style="{ width: '100%' }"
                placeholder="请选择时间类型"
                @change="dateTypeChange"
            >
                <el-option
                    v-for="(item, index) in dateTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="activeData.format !== undefined" label="时间格式">
            <el-input
                :value="activeData.format"
                placeholder="请输入时间格式"
                @input="setTimeValue($event)"
            />
        </el-form-item>
    </div>
</template>

<script>
const dateTimeFormat = {
    date: 'yyyy-MM-dd',
    week: 'yyyy 第 WW 周',
    month: 'yyyy-MM',
    year: 'yyyy',
    datetime: 'yyyy-MM-dd HH:mm:ss',
    daterange: 'yyyy-MM-dd',
    monthrange: 'yyyy-MM',
    datetimerange: 'yyyy-MM-dd HH:mm:ss'
}
export default {
    name: 'ConfigItemDate',
    components: {
    },
    props: ['activeData'],
    data() {
        return {
            dateTypeOptions: [
                {
                    label: '日(date)',
                    value: 'date'
                },
                {
                    label: '周(week)',
                    value: 'week'
                },
                {
                    label: '月(month)',
                    value: 'month'
                },
                {
                    label: '年(year)',
                    value: 'year'
                },
                {
                    label: '日期时间(datetime)',
                    value: 'datetime'
                }
            ]
        }
    },
    methods: {
        dateTypeChange(val) {
            this.setTimeValue(dateTimeFormat[val], val)
        },
        setTimeValue(val, type) {
            const valueFormat = type === 'week' ? dateTimeFormat.date : val
            this.$set(this.activeData.config, 'defaultValue', null)
            this.$set(this.activeData, 'value-format', valueFormat)
            this.$set(this.activeData, 'format', val)
        }
    }
}
</script>

<style scoped>

</style>
